<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="25%"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="枚举名称" prop="enumerationName">
          <el-input v-model="formData.enumerationName" style="width: 85%" />
        </el-form-item>
        <el-form-item label="枚举编码" prop="enumerationCode">
          <el-input v-model="formData.enumerationCode" style="width: 85%" />
        </el-form-item>
        <el-form-item label="父级编码">
          <el-input v-model="formData.parentLevelEncoding" style="width: 85%" />
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
          <el-input v-model="formData.sort" style="width: 85%" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="formData.isUse" class="ml-4">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.describe" style="width: 85%" />
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const props = defineProps(["title"]);
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定关闭弹窗嘛?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const formData = reactive({
  enumerationName: "",
  enumerationCode: "",
  parentLevelEncoding: "",
  sort: "",
  url: "",
  isUse: "1",
  describe: ""
});
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  enumerationName: [
    { required: true, message: "请输入枚举名称", trigger: "blur" }
  ],
  enumerationCode: [
    { required: true, message: "请输入枚举编码", trigger: "blur" }
  ],
  sort: [{ required: true, message: "请输入排序号", trigger: "blur" }]
});

function cancel() {
  this.dialogVisible = false;
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible
});
</script>

<style scoped></style>
